<template>
  <el-dialog 
    v-el-drag-dialog
    :title="title"
    :class="className"
    @closed="closed"
    :before-close="beforeClose"
    :visible="visible"
    modal-append-to-body
    append-to-body
    :destroy-on-close="destroyOnClose"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :show-close="showClose"
    @update:visible="updateVisible"
    @opened="opened">
    <slot name="main" />
    <div slot="footer">
      <slot name="footer" />
    </div>
  </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
export default {
  data() {
    return {
      // className: '',
      classNameArray: [
        'dialog-mini',
        'dialog-small',
        'dialog-medium',
        'dialog-large',
        'dialog-default'
      ]
    }
  },
  props: {
    closeOnClickModal: {
      type: Boolean,
      default: false
    },
    closeOnPressEscape: {
      type: Boolean,
      default: true
    },
    showClose: {
      type: Boolean,
      default: true
    },
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'small'
    },
    destroyOnClose: {
      type: Boolean,
      default: false
    },
    beforeClose: {
      type: Function,
      default: function(done) {
        done(true)
      }
    }
  },
  directives: {
    elDragDialog
  },
  methods: {
    updateVisible(v) {
      this.$emit('update:visible', v)
    },
    closed() {
      this.$emit('closed')
    },
    opened() {
      this.$emit('opened')
    }
  },
  computed: {
    className() {
      switch (this.size) {
        case 'mini': return this.classNameArray[0]
        case 'small': return this.classNameArray[1]
        case 'medium': return this.classNameArray[2]
        case 'large': return this.classNameArray[3]
        case 'default': return this.classNameArray[4]
        default: return ''
      }
    }
  }
}
</script>